<template>
  <section class="xh-input-box">
    <el-input
      v-model.trim="url"
      placeholder="请输入长连接地址，例如：https://xxx.xxxx.xxx/"
    ></el-input>
    <el-button type="primary" @click="getLink">CLICK</el-button>
  </section>
</template>

<script>
import validUrl from "valid-url";
export default {
  data() {
    return {
      url: "",
      config: {
        status: false,
        longUrl: "",
        message: "",
      },
    };
  },
  methods: {
    getLink() {
      this.config.longUrl = "";
      this.config.status = true;
      this.config.message = "";
      // 1. 验证长连接url是否为空 & 是否合法
      if (!this.url && this.config.status) {
        this.config.message = "长连接不能为空！";
        this.config.status = false;
      }

      if (!validUrl.isUri(this.url) && this.config.status) {
        this.config.message = "长连接地址不合法或格式错误！";
        this.config.status = false;
      }

      // 2. 把信息提交给result-box
      this.config.longUrl = this.url;
      this.$bus.$emit("sendLongUrl", this.config);
    },
  },
};
</script>

<style scoped lang="stylus">
.xh-input-box {
  margin: 0 auto;
  display: flex;
  height: 50px;
  width: 800px;
  align-items: center;
}
</style>
